/**
* @note 衣带渐宽终不悔,Bug寻得人憔悴
* @author yuliang
* @description 司机端/上传回单/图片上传
* @createDate 2020/8/26
*
*/

import React from 'react';
import {
  View,
  StyleSheet,
  Text,
  DeviceEventEmitter,
  TextInput,
  Keyboard,
} from 'react-native';
// import { styles } from '../../../../../common';
// import { BackImage, msg, Header } from '../../../../common';
// import Picker from '../../../../common/picker';
// import LinearGradient from 'react-native-linear-gradient';
import { ScrollView } from 'react-native-gesture-handler';
import {
  mainBgColorLightGray,
  px2dp,
  fontColorBlack,
} from '../../../../../common/styles';

export default class Notes extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      index: 0,
      remark: this.props.remark,
      keyboardHeight: '', // 键盘高度
    };
  }

  onChangeText(text) {
    if (text.length > 50) {
      return;
    }
    this.setState({ remark: text });
    DeviceEventEmitter.emit('remark', text, this.props.index);
  }

  componentDidMount() {
    // 监听键盘
    this.keyboardDidShowListener = Keyboard.addListener(
      'keyboardWillShow',
      this._keyboardDidShow.bind(this),
    );
    this.keyboardDidHideListener = Keyboard.addListener(
      'keyboardWillHide',
      this._keyboardDidHide.bind(this),
    );
  }

  componentWillUnmount() {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
  }

  _keyboardDidShow(e) {
    this.setState({
      keyboardHeight: e.startCoordinates.height,
    });
  }

  _keyboardDidHide(e) {
    this.setState({
      keyboardHeight: 0,
    });
  }

  render() {
    const { remark } = this.state;
    const { index } = this.props;
    return (
      <ScrollView
        showsVerticalScrollIndicator={false}
      >
        <View style={styles.inputContent}>
          <TextInput
            style={[
              styles.goodsWrapPriceTextInput,
              { color: fontColorBlack },
            ]}
            placeholder='请输入备注信息'
            placeholderTextColor='#CDCCC9'
            multiline
            maxLength={100}
            defaultValue=''
            value={remark}
            underlineColorAndroid='transparent'
            onChangeText={(text) => {
              this.onChangeText(text);
            }}
            onBlur={() => {
            }}
          />
          <View style={styles.textNumWarp}>
            <Text style={styles.textNum}>
              {remark ? remark.length : 0}
              /50
            </Text>
          </View>
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  textInputStyle: {
    height: px2dp(200),
    backgroundColor: '#0f0'
  },
  textNumWarp: {
    flex: 1,
    justifyContent: 'flex-end',
    flexDirection: 'row',
  },
  textNum: {
    color: 'rgb(153,153,153)',
    fontSize: 14,
  },
  inputContent: {
    paddingHorizontal: 12,
    paddingVertical: 12,
    backgroundColor: mainBgColorLightGray,
    marginVertical: 10,
    marginBottom: px2dp(24) * 2
  },
  goodsWrapPriceTextInput: {
    fontSize: px2dp(32),
    height: px2dp(280),
    width: '100%',
    backgroundColor: mainBgColorLightGray,
    textAlignVertical: 'top',
  },
});
